<template>
	<view class="kuang">
		<view class="chengshitansuo">
				<view class="one">
					<view class="h1">
						泉州风光
					</view>
					<swiper class="lunbo" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true" style="width: 100%;
					height: 350rpx;border-radius:8rpx;">
						<swiper-item><image style="width: 330px;height: 230px;" src="/static/city1.png" class="tu1"></image></swiper-item>
                        <swiper-item><image style="width: 330px;height: 230px;" src="/static/city2.jpg" class="tu1"></image></swiper-item>
						<swiper-item><image style="width: 330px;height: 230px;" src="/static/city3.jpg" class="tu1"></image></swiper-item>
					</swiper>
				</view>
				<view class="two">
					<rich-text :nodes="introduce" ></rich-text>
				</view>
				<view class="three">
					<view class="three-title" style="margin-bottom:10px;">探索进度</view>
					<view class="threre-info">
						<text class="three-text">当前进度：60%</text>
						<progress percent="60" show-info stroke-width="6" style="margin-top: 10px;"/>
					</view>
				</view>
				 <view class="four">
				    <view class="h5">选择城市</view>
				    <view class="four-info">
				     
				    <picker mode="selector" :range="cityList" @change="handleCityChange">
				      <view class="four-title">当前选择: {{ selectedCity[0] }} - {{ selectedCity[1] }}- {{ selectedCity[2] }}</view>
				    </picker>
				     
				     
				    </view>
				  </view>
				<view class="five">
					<view class="h6">泉州宣传</view>
					<video    src="/static/city-video.mp4"   poster="/static/music-poster.jpg" style="width: 100%;height: 200px;margin-top: 10px;border-radius: 12px;">
					</video>
							<view class="six">
										<view class="h7">泉州背景音乐</view>
										<button type="primary" @click="playAudio" style="height: 60px;width: 80px;display: flex;align-items: center;justify-content: center;font-size: 17px;">
										  {{ isPlaying ? '暂停' : '播放' }}
										</button>
										<text style="display: flex;flex-direction: column;align-items: center;padding-top: 10px;font-size: 15px;">泉州南音 - 泉州传统乐曲</text>
										<slider class="volume-slider" :value="volume" @change="changeVolume" min="0" max="100"></slider>
		
					</view>
					
				</view>
			  <view class="seven">
				  <view class="h8" style="font-weight: 700;font-size: 18px;">偏好设置</view>
			     <view class="preference-item">
			      <view style="display: flex;align-items: center;margin-right: 1px;writing-mode: vertical-rl; font-size: 15px;font-weight: 700;">出行方式</view>
			      <radio-group @change="handleTravelChange">
			        <radio value="bus" :checked="travelType === 'bus'" style="font-size: 14px;font-weight: 700;color: #333;padding-right: 15px;">公交</radio>
			        <radio value="drive" :checked="travelType === 'drive'" style="font-size: 14px;font-weight: 700;color: #333; padding-right: 15px;">自驾</radio>
			        <radio value="walk" :checked="travelType === 'walk'" style="font-size: 14px;font-weight: 700;color: #333;">步行</radio>
			      </radio-group>
				  </view>
				  <view style="border-top: 1px solid #e5e5e5;width:330px;"></view>
				  <view class="preference-item" style="margin-top: 30px;display: flex;justify-content: space-between;align-items: center;padding-right: 15px;">
				        <view class="h9" style="padding-bottom: 10px;font-weight: 550;font-size: 15px;">显示推荐景点:</view>
				        <switch :checked="showRecommend" @change="handleRecommendChange" />
				      </view>
                 <view style="border-top: 1px solid #e5e5e5;width:330px;"></view>
				      <view class="preference-item" style="display: flex;align-items: center;margin-top: 25px;">
				        <view class="h10" style="font-weight: 550;font-size: 15px;">探索半径:  {{ radius }}km</view>
				        <slider :value="radius" @change="handleRadiusChange" min="1" max="20" style="flex: 1;max-width: 150px;color: #2f5496;"/>
				      </view>
					  <view style="border-top: 1px solid #e5e5e5;width:330px;"></view>
				   </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 introduce: `
				    <h2 style="font-size: 20px; color: #333; font-weight: bold;margin-bottom:10px;margin-top:5px" >泉州介绍</h2>
				    <h3 style="font-size: 18px; color: #333; font-weight: bold;margin-bottom:10px;">海上丝绸之路起点 - 泉州</h3>
				    <p style="font-size: 15px; color: #666;margin-bottom:10px;"><span style="font-weight:bold;">历史文化：</span>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</p >
				    <p style="font-size: 15px; color: #666;margin-bottom:10px;"><span style="font-weight:bold;">著名景点：</span>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p >
				    <p style="font-size: 15px; color: #666;"><span style="font-weight:bold;">特色文化：</span>拥有<span style="color:#007AFF">南音</span>、<span style="color:#007AFF">木偶戏</span>和<span style="color:#007AFF">闽南建筑</span>等丰富的非物质文化遗产。</p >
				    `,
				 selectedCity: ['福建省', '泉州市', '丰泽区'] ,
				   travelType: 'bus', 
				       showRecommend: true, 
				       radius: 12, 
					 volume: 50, // 初始音量（0-100）
					       audioContext: null // 用于存储音频上下文
			}
			},
			 onReady() {
			    // 初始化音频上下文
			    this.audioContext = uni.createInnerAudioContext();
			    this.audioContext.src = '/static/city-music.mp3'; // 替换为你的音频文件路径
			    this.audioContext.volume = this.volume / 100; // 音量映射（0-1）
		},
		methods: {
			 handleCityChange(e) {
			      this.selectedCity = e.detail.value; 
			    },
				 playAudio() {
				    if (this.isPlaying) {
				      this.audioContext.pause(); // 暂停音频
				    } else {
				      this.audioContext.play(); // 播放音频
				    }
				    this.isPlaying = !this.isPlaying; // 切换状态
				  },
					 changeVolume(e) {
					      this.volume = e.detail.value;
					      this.audioContext.volume = this.volume / 100;
					    },
					  handleTravelChange(e) {
					      this.travelType = e.detail.value;
					    },
					    handleRecommendChange(e) {
					      this.showRecommend = e.detail.value;
					    },
					    handleRadiusChange(e) {
					      this.radius = e.detail.value;
					    }
			
		},
		  onUnload() {
		    // 页面销毁时销毁音频上下文
		    this.audioContext.destroy();
		  },
	}
</script>

<style>
		
	.kuang{
		min-height:200vh;
		padding: 20rpx;
		background-color:  #f0f0f0;
	}
.one{
	background-color: white;
	width: 358px;
	height: 210px;
	margin: 0 auto;
	border-radius: 16rpx;
	padding-top: 10px;
	margin-bottom: 10px;
}
.h1{
	padding-left: 15px;
	font-size: 20px;
	font-weight:bold;
	height: 25px;
	color: #333;
}
.tu1{
	padding-left: 14px;
	padding-top:10px ;
	
}
.two{
	 padding: 20rpx;
	  background-color: #fff;
	border-radius: 16rpx;
	  margin-bottom: 20rpx;
	  height: 235px;
}
.three{
	padding: 20rpx;
	 background-color: #fff;
	 border-radius: 16rpx;
	 margin-bottom: 20rpx;
	 height: 93px;
}
.four{
	padding: 20rpx;
	 background-color: #fff;
	 border-radius: 8rpx;
	 margin-bottom: 20rpx;
	 height: 80px;
}
.five{
	padding: 20rpx;
	 background-color: #fff;
	 border-radius: 16rpx;
	 margin-bottom: 20rpx;
	 height: 430px;
	 
}
.three-title{
	font-size: 20px; 
	color: #333; 
	font-weight: bold;
	margin-top:1px
	
}
.threre-info{
	margin-bottom: 20px;
}
.three-text{
	color: #666;
	font-size: 17px;
}

.h5{
	font-size: 20px;
	color: #333; 
	font-weight: bold;
	margin-top:1px
}
.four-info{
	background-color: #f0f0f0;
	height: 40px;
	margin-top: 10px;
	align-items: center;
	display: flex;
	padding-left: 10px;
	border-radius: 12rpx;
}
.four-title{
font-size: ;
}
.six{
	background-color: #f0f0f0;
	height: 165px;
	border-radius: 16rpx;
	padding-top: 10px;
	margin-top: 15px;
	padding-left: 10px;
	
}
.h6{
	font-size: 17px;
	color: #333; 
	font-weight: bold;
}
.seven{
	font-size: 16px;
	height: 298px;
	background-color:#fff ;
	padding-top: 10px;
	margin-top: 15px;
	padding-left: 10px;
	border-radius: 16rpx;
}
.h7{
	font-size: 16px;
	color: #333; 
	font-weight: bold;
}
.h8{
	font-size: 17px;
	color: #333; 
	font-weight: bold;
	padding-bottom: 20px;
	
}
.preference-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.preference-item text {
  width: 100px;
}
radio-group {
  display: flex;
  align-items: center;
}
radio {
  margin: 0 10px;
}
.h9{
	width: 50x;
	
}
.h10{
	padding-right: 50px;

}
</style>
